<!DOCTYPE html>
<html lang="es"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta content="App Inventor para Android" name="description">
    <meta content="Android, Blocks App Inventor, Mobile, Phone, IDE" name="keywords">
    <title>
      Display List - App Inventor para Android
    </title>
    <link href="../../../static/images/appinventor-16.png" rel="SHORTCUT ICON" type="image/ico">
    <link href="../../../static/images/appinventor-16.png" rel="icon" type="image/png">
    <link href="../../../static/css/appinventor.css" rel="stylesheet" type="text/css">
<!-- ADD Google Analytics here -->
<!-- END Google Analytics here -->
    <style type="text/css">
img.c2 {border-width:0}
    div.c1 {clear:both;}
    </style>
  </head>
  <body>
    <div id="aiac">
      <div class="main-container">
        <div class="header">
          <div class="header-title">
            <a href="../../../about/index.html"><img alt="" src="../../../static/images/appinventor_logo.gif"></a>
          </div>
            <div class="header-search">
<!-- ADD Google Custom Search -->
<!-- END Google Custom Search -->
              <div class="header-search-query">
              </div>
              <div class="header-search-button">
              </div>
            </div>
          <div class="header-login">
            <div class="header-login-greeting">
              Aprende acerca de App Inventor
            </div>
          </div>
        </div>
        <div class="customhr customhr-green"></div>
<!-- ADD Google Search Results -->
<div id="cse" style="width:100%;height:0;"></div>
<!-- END Google Search Results -->
        <div id="navigation">
          <div id="navigation-links">
            <div class="navigation-link-option" id="navigation-link-home">
              <a href="../../../about/index.html">Acerca de</a>
            </div>
            <div class="navigation-link-option navigation-link-active" id="navigation-link-learn">
              <a href="../../../learn/index.html">Aprende</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-forum">
              <a href="../../../forum/index.html">Foro</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-myappinventor">
              <a href="">Mis Proyectos</a><div>(próximamente)</div>
            </div>
          </div>
          <div id="navigation-breadcrumb">
            <a href="../../../learn/index.html">Aprende</a> &gt; <a href="../../../learn/tutorials">Tutoriales</a> &gt; Display List
          </div>
          <div class="c1"></div>
        </div>
        <div class="customhr customhr-gray"></div>
        <div class="content">
          <div class="content-body">
            <div class="learn-page">
              <h1>
                Mostrando una lista
              </h1>
              <p>
                A menudo definirás variables de lista para almacenar datos. Por ejemplo, la siguiente variable almacena una lista de números de teléfono:
              </p>
              <div class="imagecontainer">
                <img alt="" src="DisplayListAssets/broadcastListItems.png" width="436">
              </div>
              <p>
                Cuando quieres mostrarla como una lista en el teléfono, puedes conectarla a la propiedad Text de una etiqueta, como en este ejemplo:
              </p>
              <div class="imagecontainer">
                <img alt="" src="DisplayListAssets/simpleDisplayList.png" width="389">
              </div>
              <p>
                En el teléfono, los elementos de la lista aparecerán en BroadcastListLabel como una lista delimitada por espacios:
              </p>
              <blockquote>                
                (1112222 3334444 5556666)              
              </blockquote>
              <p>
                El usuario puede ver los datos, pero esta forma no es muy elegante. Generalmente las listas se muestran en lineas separadas o con comas separando cada elemento.
              </p>
              <p>
                Para mostrar una lista de un modo mas elegante, las vas a <em>serializar</em> -- escribirás bloques para mover los elementos de la lista a la etiqueta (label) con el formato que deseas. Puedes mostrar los elementos en lineas separadas, añadir texto decorativo -- o cualquier cosa que imagines. Para serializar una lista, usaras un bloque foreach para añadir sucesivamente cada elemento de la lista.
              </p>
              <p>
                Aquí tienes un ejemplo que muestra BroadcastList en lineas separadas. Los bloques están incluidos en un procedimiento al cual llamarás cada vez que se modifique la lista.
              </p>
              <div class="imagecontainer">
                <img alt="" height="299" src="DisplayListAssets/displayNumbersOnly.png" width="612">
              </div>
              <h2>
                Como trabajan los bloques
              </h2>
              <p>
                Primero se inicia el texto BroadcasatListLabel.Text con un encabezado, "Phone Numbers...". Entonces comienza el bloque foreach -- todos los bloques incluidos se repetirán para cada elemento de la lista BroadcastList. Si la lista tiene tres elementos, como en BroadcastList, los bloques incluidos en foreach se ejecutarán tres veces. Cada vez que se repiten los bloques, en la variable pnumber hay un elemento diferente. La primera vez tendrá 1112222, la segunda tendrá 3334444 y la tercera vez tendrá 5556666. Cada vez el bloque make a text añade la variable pnumber al final de BroadcastListLabel.Text, coloca un caracter de nueva linea, "\n", entre cada uno.
              </p>
              <h3>
                El carácter nueva linea "\n"
              </h3>
              <p>
                Los objetos de texto constan generalmente de letras, dígitos, y signos de puntuación. Pero el texto puede almacenar también caracteres especiales de control, los cuales no escriben un único carácter. "\n" es como un carácter de control. Cuando aparece en un bloque de texto, significa "ve abajo a la siguiente linea antes de mostrar la siguiente cosa." Por lo que el texto "1112222\n3334444\n5556666" aparecerá como:
              </p>
              <blockquote>                
                1112222<br>
                3334444<br>
                5556666              
              </blockquote>
              <p>
                Vamos a hacer un seguimiento a los bloques para ver como se construye BroadcastListLabel. Hacer un seguimiento a los bloques significa mostrar como cambia cada variable/propiedad cuando se ejecutan los bloques. Como existe un bloque foreach, consideraremos los valores después de cada iteración -- cada vez que se ejecutan los bloques incluidos en foreach:
              </p>
              <div class="advtutorial">
                <table>
                  <tbody>
                    <tr>
                      <td class="tbl-header">
                        Iteración
                      </td>
                      <td class="tbl-header">                        
                        pnumber                      
                      </td>
                      <td class="tbl-header">                        
                        PhoneListLabel.Text                      
                      </td>
                    </tr>
                    <tr>
                      <td>
                        Antes de foreach
                      </td>
                      <td>                        
                        n/a                      
                      </td>
                      <td>                        
                        PhoneNumbers...                      
                      </td>
                    </tr>
                    <tr>
                      <td>
                        después de la primera iteración
                      </td>
                      <td>                        
                        1112222                      
                      </td>
                      <td>                        
                        PhoneNumbers...\n1112222                      
                      </td>
                    </tr>
                    <tr>
                      <td>
                        después de la segunda iteración
                      </td>
                      <td>                        
                        3334444                      
                      </td>
                      <td>                        
                        PhoneNumbers...\n1112222\n3334444                      
                      </td>
                    </tr>
                    <tr>
                      <td>
                        después de la tercera iteración
                      </td>
                      <td>                        
                        3334444                      
                      </td>
                      <td>                        
                        PhoneNumbers...\n1112222\n3334444\n5556666                      
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>
                Como se muestra en la tabla,el bloque foreach realiza la tarea de colocar sucesivamente el siguiente elemento de BroadcastList en la variable pnumber. En la primera iteración, pnumber es 1112222, en la segunda 3334444 y en la tercera 5556666. El bloque foreach hace parte del trabajo por ti -- no necesitas ajustar explícitamente la variable pnumber a uno de los elementos de la lista. 
              </p>
              <p>
                Los bloques incluidos en foreach añaden un "\n" y el número al valor previo de PhoneListLabel.Text. Por lo que después de cada iteración, la etiqueta es mas larga y tiene un número de teléfono mas (y una nueva linea mas). Al finalizar el bloque foreach, PhoneListLabel.Text estará ajustada por lo que los números aparecerán como:
              </p>
              <blockquote>                
                1112222<br>
                3334444<br>
                5556666              
              </blockquote>
            </div>
          </div>
        </div>
      </div>
    <div class="footer">
      <div class="footer-legal">
        <p>
          <a href="http://creativecommons.org/licenses/by/3.0/es/" rel="license"><img alt="Creative Commons License" class="c2" src="http://i.creativecommons.org/l/by/3.0/88x31.png"></a><br>
          Este trabajo está bajo una licencia <a href="http://creativecommons.org/licenses/by/3.0/es/" rel="license">Creative Commons Attribution 3.0 Unported License</a> .
        </p>
        <p>
          El trabajo original de Google se ha modificado<br>
          El trabajo modificado fue traducido del Inglés al Español<br>
          <a href="../../../about/index.html">Acerca de</a> | <a href="../../../about/privacy.html">Privacidad</a> | <a href="../../../about/termsofservice.html">Condiciones</a>
        </p>
      </div>
      <div class="footer-lastupdate">
        <script type="text/javascript">
if (document.lastModified != '') {
                var m = "Page last updated: " + document.lastModified;
                var p = m.length-8;
                document.writeln("<center>");
                document.write(m.substring(p, 0));
                document.writeln("<\/center>");
              }
        </script>
      </div>
     </div>
    </div>
  </body></html>

